<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <title>BUSÃO</title>
        <link href="./favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="./Content/site.css" rel="stylesheet"/>
        <script src="./Scripts/busao.js"></script>
        
        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization" type="text/javascript"></script>
        
        <script type="text/javascript">

        function initialize() {
            var mapOptions = {
                zoom: 11,
                center: new google.maps.LatLng(-22.879657, -43.468298),
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };

            googlemap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);            
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        
        $(document).ready(function() {
            $('#heatmap-checkbox').change(function() {
                if(heatmap === null) {
                    getBusInformation();
                }
                else {
                    if($(this).is(':checked')) {
                        heatmap.setMap(googlemap);
                    }
                    else {
                        heatmap.setMap(null);
                    }
                }
            });
        
            $("#layer-dialog").dialog({ 
                dialogClass: "no-close",
                closeOnEscape: false,
                position: { my: "left top", at: "right bottom", of: window }
            });
            
            $("#onibus-dialog").dialog({ 
                dialogClass: "no-close",
                closeOnEscape: false,
                position: { my: "left top", at: "left center", of: window },
                open: function( event, ui ) {
                    getBusList($("#onibus-text"));
                }
            });
        });
        
        </script>
    </head>

    <body>
        <div id="map-canvas" style="height: 100%;margin: 0px;padding: 0px"></div>
        <div id="layer-dialog" title="Camadas">
            <input type="checkbox" id="heatmap-checkbox"/>HeatMap Onibus
                <div id="Reloading" style="display: inline-block;">
                    <span class="ui-icon ui-icon-refresh" style="display: inline-block;" onclick="reloadBusInformation();"></span>
                </div>
                <div id="HeatLoading" style="display: inline;display: none;">
                    <img src="./Content/loader.gif" />
                </div>
        </div>
        <div id="onibus-dialog" title="Ônibus">
            <div id="onibus-text"></div>
        </div>
    </body>
</html>
